import React, { Component } from 'react'
import { Input, Button, List, Row, Col, Card } from 'antd'
import { nanoid } from 'nanoid'
import { createAddPersonAction } from '../../redux/actions/person'
import { connect } from 'react-redux'

class Person extends Component {
  state = {
    name: '',
    age: null
  }
  // 输入框数据改变
  nameChange = (event) => {
    this.setState({ name: event.target.value })
  }
  ageChange = (event) => {
    this.setState({ age: event.target.value })
  }
  //添加一个人
  addPerson = () => {
    const { name, age } = this.state
    console.log(this.props);
    this.props.addPerson({ id: nanoid(), name, age })
    // 清空输入框
    this.setState({ name: '', age: null })
  }
  render() {
    const { name, age } = this.state
    const { person, count } = this.props
    return (
      <div style={{ padding: '10px' }}>
        <Card hoverable>
          <Row>
            <Col span={12}>
              <h4>我是Person组件</h4>
              姓名：<Input style={{ width: 300, margin: '10px 0' }} value={name} onChange={this.nameChange} placeholder='请输入姓名' />
              <br />
              年龄：<Input style={{ width: 300 }} value={age} onChange={this.ageChange} placeholder='请输入年龄' />
              <br />
              <Button style={{ margin: '10px 0' }} type='primary' onClick={this.addPerson}>添加</Button>
              <List
                header={<div>列表数据</div>}
                footer={<div>Footer</div>}
                style={{ width: 400 }}
                bordered
                dataSource={person}
                renderItem={(item) => (
                  <List.Item key={item.id}>
                    姓名：{item.name}&nbsp; 年龄：{item.age}
                  </List.Item>
                )}
              />
            </Col>
            <Col span={12}>
              <h3>Count组件的和为：{count}</h3>
            </Col>
          </Row>
        </Card>

      </div>
    )
  }
}

export default connect(
  state => ({ person: state.person, count: state.count }),
  {
    addPerson: createAddPersonAction,
  }
)(Person)
